<template>
	<view style="width: 100%;height: 100%;">
		<canvas canvas-id="canvas" id="canvas"></canvas>
		<button class="but" type="default" @click="exportImage('canvas')">保存图片</button>
		<canvas canvas-id="canvas2" id="canvas2"></canvas>
		<button class="but" type="default" @click="exportImage('canvas2')">保存图片</button>
		<canvas canvas-id="canvas3" id="canvas3"></canvas>
		<button class="but" type="default" @click="exportImage('canvas3')">保存图片</button>
	</view>
</template>

<script>
	import pickerColor from "../../component/helang-pickerColor.vue"
	import Painter from "mp-painter";
	export default {
		components: {
			"picker-color": pickerColor,
		},
		data() {
			return {
				datalist: {},
				name:'',
				bgurl:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/ff0e9769-9aa5-4215-8191-989ee9b3f67a.jpg',
			};
		},
		async onReady() {
			const db = uniCloud.database()
			let res = await db.collection('solarTerms24').where({
				name:this.name
			}).get({
				getOne: true
			})
			console.log(res.result.data);
			this.datalist = res.result.data
			// 第一
			let painter = new Painter(uni.createCanvasContext("canvas"));
			await painter.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 1400,
				background: "#06c1ac",
				"children": [{
						"position": "absolute",
						top: 0,
						left: 0,
						"type": "image",
						src: this.bgurl,
						width: 750,
						height: 1400,
						// objectFit: "contain",
						objectFit: "contain",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						"position": "absolute",
						top: 140,
						left:600,
						width: 730,
						fontSize: 30,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.pub_date
					},
					{
						"type": "rect",
						"top": 180,
						left: 0,
						"background": "#fff",
						"width": 750,
						"height": 3
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 10,
						left:270,
						width: 730,
						fontSize: 30,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.pri_date
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 10,
						left:260,
						width: 730,
						fontSize: 50,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '节气简介'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 10,
						left: 20,
						width: 730,
						fontSize: 32,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.des.replace(/<\/p>/g, '').replace(/<p>/g, '')
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 30,
						left:260,
						width: 730,
						fontSize: 50,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '节气由来'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 10,
						left: 20,
						width: 730,
						fontSize: 32,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.youLai.replace(/<\/p>/g, '').replace(/<p>/g, '')
					},
				]

			
			});
			// 第二
			let painter2 = new Painter(uni.createCanvasContext("canvas2"));
			await painter2.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 1400,
				background: "#06c1ac",
				"children": [{
						"position": "absolute",
						top: 0,
						left: 0,
						"type": "image",
						src: this.bgurl,
						width: 750,
						height: 1400,
						// objectFit: "contain",
						objectFit: "contain",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						"position": "absolute",
						top: 140,
						left:600,
						width: 730,
						fontSize: 30,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.pub_date
					},
					{
						"type": "rect",
						"top": 180,
						left: 0,
						"background": "#fff",
						"width": 750,
						"height": 3
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 30,
						left:270,
						width: 730,
						fontSize: 30,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.pri_date
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 30,
						left:260,
						width: 730,
						fontSize: 50,
						
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '节气习俗'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 10,
						left: 20,
						width: 730,
						fontSize: 32,
						lineHeight: 50,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.xiSu.replace(/<\/p>/g, '').replace(/<p>/g, '')
					},
				]
			});
			// 第三
			let painter3 = new Painter(uni.createCanvasContext("canvas3"));
			await painter3.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 1400,
				background: "#06c1ac",
				"children": [{
						"position": "absolute",
						top: 0,
						left: 0,
						"type": "image",
						src: this.bgurl,
						width: 750,
						height: 1400,
						// objectFit: "contain",
						objectFit: "contain",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						"position": "absolute",
						top: 140,
						left:600,
						width: 730,
						fontSize: 30,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.pub_date
					},
					{
						"type": "rect",
						"top": 180,
						left: 0,
						"background": "#fff",
						"width": 750,
						"height": 3
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 30,
						left:270,
						width: 730,
						fontSize: 30,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.pri_date
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 30,
						left:210,
						width: 730,
						fontSize: 50,
						
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": '节气养生建议'
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#fff',
						top: 10,
						left: 20,
						width: 730,
						fontSize: 32,
						lineHeight: 50,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.datalist.heath.replace(/<\/p>/g, '').replace(/<p>/g, '')
					},
				]
			});
		},
		onLoad(option) {
			this.name=option.name
		},
		methods: {
			showPickerColorPop() {
				this.showPickerColor = true;
			},
			getPickerColor(color) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				});
				/* 隐藏弹窗 */
				this.showPickerColor = false;
			 /* 判断颜色值是否有效 */
				if (color) {
					this.color = color;
					setTimeout(res=>{
						uni.hideLoading();
						this.update()
					},1500)
				}
			},
			update() {
				let path;
				let navigateMethod;
				// #ifdef H5
				path = this.$route.path;
				navigateMethod = uni.navigateTo;
				// #endif
				// #ifndef H5
				path = (pages => "/" + pages[pages.length - 1].route)(getCurrentPages());
				navigateMethod = uni.redirectTo;
				// #endif
				navigateMethod.call(null, {
					url: path + "?d=" + this.color
				});
			},
			exportImage(name) {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				/**
				 * 在 uni-app:h5 中下载
				 * uni app 未在 h5 中实现 saveImageToPhotosAlbum
				 * @param {string} base64
				 */
				const donwloadBase64 = base64 => {
					const a = document.createElement("a");
					a.href = base64;
					a.download = "mp-painter-playground-export.jpg";
					a.click();
				}
				uni.canvasToTempFilePath({
					canvasId: name,
					fileType: "jpg",
					success: res => {
						console.log(res);
						// #ifdef H5
						donwloadBase64(res.tempFilePath)
						uni.hideLoading();
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						})
						// #endif
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.od {
		object-fit: contain;
		position: absolute;
	}

	#canvas {
		width: 750rpx;
		height: 1400rpx;
	}
	#canvas2 {
		width: 750rpx;
		height: 1400rpx;
	}
	#canvas3 {
		width: 750rpx;
		height: 1400rpx;
	}
	.but {
		width: 45%;
		font-weight: bold;
		margin: 30rpx auto;
		background-color: #ff9900;
		color: #fff;
	}
</style>
